<template>
  <div class="left-sde">
    <div class="min-menu">
      <i class="min-menu-icon"></i>
    </div>
    <el-row class="tac">
      <el-col>
        <el-menu
                class="el-menu-vertical-demo"
                :router="isRouterLink"
                :unique-opened='isMenuOnly'
                :default-openeds='defaultOpeneds'
                :default-active='defaultAvtive'
                @open="handleOpen"
                @close="handleClose">
            <el-menu-item v-for="(item,index) in navData" v-if="item.type===1 && item.hasPermission" :index="item.link">
                <i :class="item.titleIconClass"></i>{{item.title}}
            </el-menu-item>
            <el-submenu v-for="(item,index) in navData" v-if="item.type===2 && item.hasPermission" :index="item.link">
                <template slot="title"><i :class="item.titleIconClass"></i>{{item.title}}</template>
                <el-menu-item v-for="(subItem,subIndex) in item.subNav" :index="subItem.subLink">{{subItem.subTitle}}</el-menu-item>
            </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'leftSide',
    data: function() {
      return {
        isMenuOnly : true,
        isRouterLink:true,
        defaultOpeneds : ['1'],
        defaultAvtive:"1",
        navData : [
                /*
                *  type=1 :无子菜单
                *  type=2 :有子菜单
                */

          {
            type:1,
              menuId:"article_manage",
              hasPermission:true,
            title:'文章管理',
            link:"/article/main",
            titleIconClass:"el-icon-home",
            subNav:[]
          },
          {
            type:2,
              menuId:"dd_manage",
              hasPermission:false,
            title:'包含自菜单',
            link:"/d/main",
            titleIconClass:"el-icon-home",
            subNav:[
              {
                subTitle:"子菜单",
                  hasPermission:false,
                subLink:"/dd/ddd"
              },

            ]
          },

        ]
      }
    },
    methods: {
      handleOpen:function(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose:function(key, keyPath) {
        console.log(key, keyPath);
      },
        getPermissionList:function(){
            var that=this;
            this.$rsClient.get("/gaPermission/loginUser",function(result){
                var allPer=[];
                //获取左侧导航列表
                for(var ind in result){
                    if(result[ind].permission){
                        allPer=allPer.concat(JSON.parse(result[ind].permission));
                    }
                }
                var buttonPermissions={},menuIdSort=[],gotoPage='';
                for(var ind in allPer){
                    for(var navInd in that.navData){
                        if(that.navData[navInd].menuId+"" == allPer[ind].menuId){
                            that.navData[navInd].hasPermission=true;
                        }

                        //给所有子菜单也加上权限
                        for(var subInd in that.navData[navInd].subNav){
                            var subNavObj=that.navData[navInd].subNav[subInd];
                            if(subNavObj.menuId){
                                if(subNavObj.menuId+"" == allPer[ind].menuId){
                                    subNavObj.hasPermission=true;
                                }
                            }else{
                                subNavObj.hasPermission=true;
                            }
                        }

                    }
                    for(var btnPermIndex in allPer[ind].btnList){
                        var btnPerm=allPer[ind].btnList[btnPermIndex];
//                        var key="menu-"+allPer[ind].menuId+"-btn-"+btnPerm.buttonId;
                        var key=allPer[ind].menuId+"-"+btnPerm.buttonId;
                        if(!buttonPermissions[key]){
                            buttonPermissions[key]={
                                hasPermission:true
                            };
                        }
                    }
                    menuIdSort.push(parseInt(allPer[ind].menuId));
                }
                //页面跳转权限
                if(allPer&&allPer.length==0){
                    that.$confirm('请联系管理员配置权限!', '提示', {
                        confirmButtonText: '确定',
                        showCancelButton:false,
                        type: 'warning'
                    })
                    that.$store.commit("APPINITLOADING",false);
                    return;
                }
                menuIdSort = arrSortRepeat(menuIdSort);
                that.navData.forEach(function(_item,_index,_arr){
                    if(_item.menuId===menuIdSort[0]){
                        gotoPage = _item.link;//页面跳转链接
                        if(_item.type==1){//无子菜单的
                            //_item.isActive = true;
                            that.defaultAvtive = _item.link;
                        }else if(_item.type==2){//有子菜单的
                            that.defaultOpeneds = [_item.link];//默认展开的项
                            that.defaultAvtive = _item.link;
                            //_item.isActive = _item.subNav[0].isActive = true;//默认选中的项
                        }
                    }
                })
                if(that.$route.fullPath=='/WebAppIndex'){//防刷新跳转至首页
                    that.$router.push(gotoPage);
                }
                that.$store.commit("APPINITLOADING",false);
                that.$store.commit("BUTTON_PERMISSION",buttonPermissions);
            });
            //数组去重和排序
            function arrSortRepeat(numberArray){
                var res = [];
                var json = {};
                for(var i = 0; i < numberArray.length; i++){
                    if(!json[numberArray[i]]){
                        res.push(numberArray[i]);
                        json[numberArray[i]] = 1;
                    }
                }
                res.sort(function(value1,value2){
                    return value1-value2
                })
                return res;
            }
        }
    },
      created:function(){
          this.getPermissionList();
      }
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  @import "../less/webStyle.less";
  .el-menu,.el-submenu .el-menu{
    background: #ffffff!important;
  }
  .el-menu i{
    color: #a7bccd;
  }
  .el-menu-item:hover{
    background-color:#ffffff!important;
    color: #d46d28!important;
  }
  .el-menu-item.is-active{
    color: #d46d28!important;
    background: #f2f6f9!important;
  }
  .el-menu-item.is-active i,
  .el-submenu__title:hover i,
  .el-submenu.is-active>div.el-submenu__title>i{
    color: #d46d28!important;
  }
  .el-submenu__title:hover{
    background: #ffffff!important;
    color: #d46d28!important;
  }
  .el-submenu.is-active>div.el-submenu__title,.el-menu.el-menu-vertical-demo>li.el-menu-item.is-active{
    color: #d46d28!important;
    background: #f2f6f9!important;
    border-left: solid 3px #d46d28;
  }
  .el-menu li{
    color: #485b6a;
  }
</style>
